<template>
  <div class="register_box">
    <div class="register">
      <form>
        <div class="label">
          <label class="error">{{ message }}</label
          ><br />
          <input
            type="text"
            placeholder="请输入用户名"
            v-model.trim="username"
          /><br />
          <input
            type="password"
            placeholder="请输入密码"
            v-model.trim="password"
          /><br />
          <input
            type="password"
            placeholder="请再次确认密码"
            v-model.trim="password2"
          /><br />
          <input
            type="rek"
            placeholder="请输入手机号"
            v-model.trim="mobile"
          /><br />
        </div>
        <div class="submit">
          <input type="submit" value="注册" @click.prevent="register" />
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "UserRegister",
  data() {
    return {
      message: "",
      username: "",
      password: "",
      password2: "",
      mobile: "",
    };
  },
  //   watch: {
  //     username(newVal) {
  //       if (newVal) {
  //         this.cancelRequest();
  //         this.axios
  //           .get("/user/" + newVal, {
  //             cancelToken: new this.axios.CancelToken(
  //               (cancel) => (this.cancel = cancel)
  //             ),
  //           })
  //           .then((res) => {
  //             if (res.data.code == 200) {
  //               if (res.data.data) {
  //                 this.message = "用户名已存在";
  //               } else {
  //                 this.message = "";
  //               }
  //             }
  //           })
  //           .catch((err) => {
  //             if (this.axios.isCancel(err)) {
  //               console.log("请求取消" + err.message);
  //             } else {
  //               console.log(err);
  //             }
  //           });
  //       }
  //     },
  //   },
  methods: {
    ...mapMutations("user", ["saveUser", "changeRegister"]),
    register() {
      this.message = "";
      if (!this.checkForm()) {
        return false;
      }
      this.axios
        .post("/register", {
          username: this.username,
          password: this.password,
          password2: this.password2,
          mobile: this.mobile,
        })
        .then((res) => {
          if (res.data.code == 200) {
            res.data.data = {
              username: this.username,
              password: this.password,
              mobile: this.mobile,
            };
            this.saveUser(res.data.data);
            this.username = "";
            this.password = "";
            this.password2 = "";
            this.mobile = "";
            this.$router.push("/");
          } else if (res.data.code == 500) {
            this.message = "注册失败";
          }
        })
        .catch((err) => {
          alert(err.message);
        });
    },
    checkForm() {
      if (!this.username || !this.password || !this.password2 || !this.mobile) {
        // this.$msgbox.show({ title: "所有字段不能为空" });
        this.message = "所有字段不能为空";
        return false;
      }
      if (this.password != this.password2) {
        // this.$msgbox.show({ title: "两次输入的密码必选相同" });
        this.message = "两次输入的密码必选相同";
        return false;
      }
      return true;
    },
    cancelRequest() {
      if (typeof this.cancel === "function") {
        this.cancel("终止请求");
      }
    },
  },
};
</script>

<style>
.register_box {
  width: 100%;
  height: 100%;
  background: darkgray;
}

.register {
  width: 210px;
  margin: 0 auto;
}

.register .submit {
  width: 205px;
  margin: 0 auto;
}

.register input {
  margin: 10px 0;
  background: beige;
  height: 30px;
  width: 200px;
}
</style>
